<template>
	<view class="service-order-card b-box" style="margin-bottom: 20rpx;">
		<!-- 用户  订单  列表卡片 -->
		<view class="bg-ff b-box w-750" style="border-radius: 16rpx;padding: 28rpx 32rpx 0">
			<!--  -->
			<view class="d-flex flex-c b-box w-100" @click="GoReadDetails">
				<view style="min-height: 146rpx;" class=" b-box d-flex flex-r ali-i-c just-s">
					<view
						style="width:140rpx ;height:140rpx;margin-right: 16rpx;border-radius:16rpx;overflow: hidden;"
						class="b-box"
					>
						<image :src="staffList.catimage" style="width:140rpx ;height:140rpx"></image>
					</view>
					<!--  -->
					<view style="width: 520rpx;height: 140rpx;" class="b-box d-flex flex-c ali-i-s just-s">
						<view class="d-flex flex-r ali-i-c just-sw b-box w-100" style="margin-bottom: 8rpx;">
							<text class="fw-500 pf-sc c-333 fz-32 text-ep-1" style="width: 300rpx;">
								{{ staffList.catname }}
							</text>
							<text
								class="fw-400 pf-sc po-re"
								style="font-size: 28rpx;right: 4rpx;"
								v-if="staffList.xcstatus == 0"
							>
								待支付
							</text>
							<text
								class="fw-400 pf-sc po-re"
								:style="{ color: staffList.xcstatus == 2 ? '#ED1D15' : '#26387C' }"
								style="font-size: 28rpx;right: 4rpx;"
								v-if="staffList.xcstatus == 1 && staffList.isorder != 2"
							>
								{{ staffList.isworker == 0 ? '待发布' : '待接单' }}
							</text>

							<text
								class="fw-400 pf-sc po-re"
								style="font-size: 28rpx;right: 4rpx;color:#ED1D15 ;"
								v-if="staffList.isorder == 2 && staffList.xcstatus == 1"
							>
								已拒绝接单
							</text>

							<!--  -->
							<text
								class="fw-400 pf-sc po-re"
								style="font-size: 28rpx;right: 4rpx;color:#ED1D15"
								v-if="staffList.xcstatus == 2"
							>
								已超时
							</text>
							<text
								class="fw-400 pf-sc po-re"
								style="font-size: 28rpx;right: 4rpx;color: #26387C"
								v-if="staffList.xcstatus == 3"
							>
								退款中
							</text>
							<text
								class="fw-400 pf-sc po-re"
								style="font-size: 28rpx;right: 4rpx;color: #26387C;"
								v-if="staffList.xcstatus == 4"
							>
								待服务
							</text>
							<text
								class="fw-400 pf-sc po-re"
								style="font-size: 28rpx;right: 4rpx;color: #26387C"
								v-if="staffList.xcstatus == 5"
							>
								服务中
							</text>
							<text
								class="fw-400 pf-sc po-re"
								style="font-size: 28rpx;right: 4rpx;color: #26387C"
								v-if="staffList.xcstatus == 6"
							>
								已取消
							</text>
							<text
								class="fw-400 pf-sc po-re"
								style="font-size: 28rpx;right: 4rpx;color: #26387C"
								v-if="staffList.xcstatus == 7"
							>
								已完成
							</text>
						</view>
						<view
							class="d-flex flex-c ali-i-s just-s b-box"
							style="min-height: 70rpx;width: inherit;padding-right: 26rpx;"
						>
							<view class="w-100 b-box d-flex flex-r ali-i-c just-sw">
								<text
									class="pf-sc fw-300"
									style="font-size: 22rpx;color: #999999;margin-bottom: 26rpx;"
								>
									{{ staffList.cardetail }}
								</text>
							</view>
							<view class="b-box d-flex flex-r ali-i-c just-s">
								<text class="pf-sc fw-500 po-re" style="font-size: 22rpx;color: #FF5C00;top:2rpx">
									¥
								</text>
								<text class="pf-sc fw-600" style="font-size: 28rpx;color: #FF5C00;">
									{{ staffList.money }}
								</text>
							</view>
						</view>
					</view>

					<!--  -->
				</view>
				<view style="height: 106rpx;" class="w-100 b-box d-flex flex-r ali-i-c just-e">
					<view style="height: inherit;" class=" d-flex flex-r ali-i-c just-s">
						<text
							style="margin-right: 16rpx;font-size: 28rpx;color: #666666;"
							class="pf-sc fw-400 "
						>
							总价：¥{{ staffList.totalmoney }}
						</text>
						<text style="font-size: 28rpx;" class="pf-sc fw-500 c-333">
							实付款：¥{{ staffList.money }}
						</text>
					</view>
				</view>
			</view>

			<!-- btn -->
			<view
				style="height: 98rpx;margin-top: 5rpx; border-bottom: 1px solid rgb(238, 238, 238);"
				class="b-box d-flex flex-r ali-i-c just-e"
			>
				<view v-if="staffList.xcstatus == 0" style="position: relative;">
					<view
						class="b-box d-flex flex-r ali-i-c just-sw"
						style="width: 400rpx;position: absolute;right: -400rpx;top: -40rpx;"
					>
						<button @click="CancelOrder" class="qxbtn">取消订单</button>
						<button class="ljxdbtn" @click="PayOrder">立即下单</button>
					</view>
				</view>
				<!-- 当订单状态为待接单的时候 按钮什么都没  用户不能执行任何操作 只能等到订单超时去申请退款 -->
				<view>
					<view class="b-box d-flex flex-r ali-i-c just-e" style="width: 386rpx;">
						<view class="d-flex">
							<button
								v-if="staffList.xcstatus == 1 && staffList.isworker == 0"
								class="qxbtn"
								@click="ReleaseInformation"
							>
								立即发布
							</button>
							<button
								v-if="staffList.isorder == 0 && staffList.xcstatus == 1"
								@click="UserCancle"
								class="ljxdbtn"
							>
								取消订单
							</button>
						</view>
					</view>
				</view>

				<view v-if="staffList.xcstatus == 2">
					<view class="b-box d-flex flex-r ali-i-c just-e">
						<view style="display: flex;">
							<button @click="ApplyForRefund" class="ljxdbtn">申请退款</button>
						</view>
					</view>
				</view>
				<!-- 当订单状态为3的时候 显示的也没有按钮 -->

				<view v-if="staffList.xcstatus == 3">
					<view class="b-box d-flex flex-r ali-i-c just-e" style="width: 386rpx;">
						<view style="width: 190rpx;"></view>
					</view>
				</view>

				<view v-if="staffList.xcstatus == 4">
					<view class="b-box d-flex flex-r ali-i-c just-e" style="width: 386rpx;">
						<view style="width: 400rpx;" class="d-flex"></view>
					</view>
				</view>

				<view v-if="staffList.xcstatus == 5">
					<view class="b-box d-flex flex-r ali-i-c just-sw">
						<button @click="Contact" class="qxbtn">联系师傅</button>

						<button @click="ConfirmCompletion" class="ljxdbtn">确认完成</button>
					</view>
				</view>

				<view v-if="staffList.xcstatus == 6">
					<view class="b-box d-flex flex-r ali-i-c just-e" style="width: 386rpx;">
						<view style="width: 190rpx;"></view>
					</view>
				</view>

				<view v-else-if="staffList.xcstatus == 7">
					<view class="b-box d-flex flex-r ali-i-c just-e" style="width: 386rpx;">
						<view style="width: 190rpx;">
							<button class="pjbtn" @click="Evaluate">立即评价</button>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import Ubutton from '../uview-ui/components/u-button/u-button';
export default {
	name: 'service-order-card',
	components: {
		'u-button': Ubutton
	},
	props: {
		staffList: {
			type: Object,
			default: () => {
				return {};
			}
		}
	},
	data() {
		return {};
	},
	methods: {
		ReleaseInformation(type) {
			//直接发布
			this.$emit('ReleaseInformation', this.staffList);
		},

		Evaluate() {
			//评价
			this.$emit('Evaluate', this.staffList);
		},
		ConfirmCompletion() {
			//确认完成
			this.$emit('ConfirmCompletion', this.staffList);
		},
		Replace() {
			//更换师傅
			this.$emit('Replace', this.staffList);
		},
		ApplyForRefund() {
			//申请退款
			this.$emit('ApplyForRefund', this.staffList);
		},
		PayOrder() {
			//支付订单
			this.$emit('PayOrder', this.staffList);
		},

		GoReadDetails() {
			uni.navigateTo({
				url: `/pages/StaffOrderDetails/StaffOrderDetails?id=${this.staffList.id}`
			});
		},
		CancelOrder() {
			//取消订单  未支付的时候
			this.$emit('CancelOrder', this.staffList);
		},
		UserCancle() {
			//取消订单 用户已经支付 待接单的情况下 取消订单
			this.$emit('UserCancle', this.staffList);
		},
		Contact() {
			//联系师傅
			this.$emit('Contact', this.staffList);
		}
	},
	mounted() {
		// console.log(this.staffList.id);//这是订单的id
	}
};
</script>

<style lang="scss" scoped>
.service-order-card {
	.pjbtn {
		height: 68rpx;
		width: 190rpx;
		font: 500 28rpx PingFang SC;
		border-width: 0rpx;
		border: 0;
		color: #fff;
		text-align: center;
		line-height: 68rpx;
		background: linear-gradient(180deg, #4885c5 0%, #3b52a6 100%);
		border-radius: 34rpx;
	}
	.ljxdbtn {
		height: 68rpx;
		width: 190rpx;
		font: 500 28rpx PingFang SC;
		border-width: 0rpx;
		border: 0;
		color: #fff;
		text-align: center;
		line-height: 68rpx;
		background: linear-gradient(180deg, #4885c5 0%, #3b52a6 100%);
		border-radius: 34rpx;
	}
	.qxbtn {
		height: 68rpx;
		width: 190rpx;
		font: 500 28rpx PingFang SC;
		border: 2rpx solid #26387c;
		color: #26387c;
		text-align: center;
		line-height: 68rpx;
		border-radius: 34rpx;
	}
}
</style>
